<template>
	<div>
		<div id="content">
			<div class="text">
				<div class="title">APN设置</div>
				<div class="words">
					<div class="title2">APN说明</div>
					<div>部分型号手机（如华为）激活充值后无法正常使用需设置APN。</div>
					<div>APN设置方式：</div>
					<div>1. 将卡插入手机卡一插槽</div>
					<div>2. 点击【设置】——【移动网络】——【接入点名称】——【新建APN】——名称和APN都是【pgwlw.grevpdn.sd】——身份验证类型改为pap——保存（一定要记得保存）；其他空白即可。</div>
				</div>
				<div class="title3">华为手机流程示意图：</div>
			</div>
			
			
			<div class="setting" style="text-align: center;">
				<img src="../../static/img/setting_01.png" style="width:96%;">
				<img src="../../static/img/setting_02.png" style="width:96%;">
				<img src="../../static/img/setting_03.png" style="width:96%;">
				
				<img src="../../static/img/setting_04.png" style="width:96%;">
				<van-button type="danger" class="setting_btn" data-clipboard-text="pgwlw.grevpdn.sd" @click="copycode">点我复制</van-button>
			</div>
		</div>
	</div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import bus from '@/assets/bus.js'
  export default {
      name: 'index',
      components:{top},
      data(){
      	return{
          
      	}
      },
      watch: {
        // num:function(newValue, oldValue) {
        //   console.log(newValue, oldValue)
        // }
      },
      computed:{
        // zongjia:function(){
        //   return this.num * 100
        // }
      },
      created() {

        
      },
      methods: {
		copycode(){
			var clipboard = new ClipboardJS('.setting_btn');
			clipboard.on('success', function(e) {
				vant.Toast.success({
					message:'复制成功',
					duration: 1000,
				});
			});
			clipboard.on('error', function(e) {
				vant.Toast.fail({
					message:'复制失败',
					duration: 1000,
				});
			});
		}
      },

  }
</script>

   <style  scoped="scoped">
       html,
       body {
           height: 100%;
       }
   
       body {
           font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif;
       }
   
       #app {
           width: 100%;
           height: 100%;
           position: relative;
       }
   	.setting{
   		position: relative;
   	}
   	.setting_btn{
   		position: absolute;
   		left: 4.2rem;
   		bottom: 8rem;
   		line-height: 30px;
   		height: auto;
   		border-radius: 8px;
   		background-color: #ff0000;
   		border: 1px solid #ff0000;
   		animation: gogogo .5s infinite;
   	}
   	@keyframes gogogo
   	{
   	    0% {transform: scale(1);}
   	    50% {transform: scale(1.2);}
   		100% {transform: scale(1);}
   	}
   	.text{
   		display: flex;
   		justify-content: center;
   		align-items: center;
   		flex-direction: column;
   		padding: .5rem .2rem;
   	}
   	.title{
   		padding: 0 .5rem;
   		padding-bottom: .1rem;
   		color: #FF3640;
   		font-size: .3rem;
   		font-weight: 600;
   		border-bottom: 2px solid #FF3640;
   	}
   	.title2{
   		padding-bottom: .2rem;
   		color: #FF3640;
   		font-size: .28rem;
   		font-weight: 600;
   	}
   	.title3{
   		color: #666666;
   		font-size: .28rem;
   		font-weight: 600;
   		align-self: flex-start;
   	}
   	.words{
   		color: #808080;
   		font-size: .2rem;
   		margin: .5rem 0;
   		line-height: 2;
   	}
   </style>
